<script setup lang="ts">
import { useRequest } from 'alova/client'
import { ref } from 'vue'
import { login, timeout } from '@/apis/auth'
import { $t } from '@/locales'

const a = ref('hello test')

const { data: loginData, send: loginApi } = useRequest(login, {
  immediate: false,
})
function handleLogin() {
  loginApi({
    username: 'admin',
    password: '123456',
  })
}

const { send: timeoutApi } = useRequest(timeout, {
  immediate: false,
})
function handleTimeout() {
  timeoutApi()
}
</script>

<template>
  <main>
    <div>index</div>
    <div>{{ a }}</div>
    <div class="a text-red">
      unocss
    </div>
    <div>
      <div>{{ $t('api.title') }}</div>
    </div>
    <div>
      <button @click="handleLogin">
        {{ $t('common.login') }}
      </button>
      <div>{{ loginData }}</div>
    </div>

    <div>
      <button @click="handleTimeout">
        触发token失效
      </button>
    </div>
  </main>
</template>
